<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">行程详情</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <header th:replace="fragments/header :: header"></header>

    <main class="container">
        <h1 th:text="${tripDetail.name}" style="font-size: 48px;"></h1>
        
        <!-- 将成功提示提升到图片上方 -->
        <div th:if="${successMessage}" class="signup-success" style="animation: fadeIn 0.5s ease-in;">
            <span th:text="${successMessage}"></span>
        </div>

        <img th:src="@{${tripDetail.imagePath}}" alt="行程图片" 
             style="width: 80%; height: 400px; margin: 0 auto; display: block;">

        <div class="detail-info" style="font-size: 28px; color: #444;">
            <p><strong style="color: #d2691e; font-size: 34px;">行程天数：</strong><span th:text="${tripDetail.duration}" style="font-size: 28px;"></span></p>
            <p><strong style="color: #d2691e; font-size: 34px;">每日安排：</strong><span th:text="${tripDetail.dailyPlan}" style="font-size: 28px;"></span></p>
            <p><strong style="color: #d2691e; font-size: 34px;">包含服务：</strong><span th:text="${tripDetail.services}" style="font-size: 28px;"></span></p>
            <p><strong style="color: #d2691e; font-size: 34px;">注意事项：</strong><span th:text="${tripDetail.notes}" style="font-size: 28px;"></span></p>
            <div class="button-container">
                <form th:action="@{/signup}" method="post">
                    <input type="hidden" name="tripId" th:value="${tripDetail.id}">
                    <button type="submit" class="cta-button">立即报名</button>
                </form>
            </div>
        </div>
    </main>

    <footer th:replace="fragments/footer :: footer"></footer>
    <script>
        function setMainPadding() {
            const footer = document.querySelector('footer');
            const main = document.querySelector('main.container');
            const footerHeight = footer.offsetHeight;
            main.style.paddingBottom = footerHeight + 'px';
        }

        // 页面加载完成时设置
        window.addEventListener('load', setMainPadding);
        // 窗口大小改变时重新设置
        window.addEventListener('resize', setMainPadding);
    </script>
</body>
</html>